<template>
  <div>
    <!-- 头部标题栏 -->
    <content-header :title="routeItem.title"></content-header>
    <h3 class="xui-margin-top-sm xui-margin-bottom-0">{{artical.title}}</h3>
    <detail-info v-if="artical || list" :detail="artical" :count="browNum"></detail-info>
    <div class="content-wrap" v-html="artical.content" v-loading="loading">
    </div>
  </div>
</template>

<script>
  import contentHeader from "../../components/widge/content-header.vue";
  import {
    getDetail
  } from "@/api/detail";
  import {
    getList
  } from "@/api/list";
  import detailInfo from "@/components/widge/detail-info";
  import {
    getBrowseNum,
    addBrowseNum
  } from "@/api/detail";

  export default {
    components: {
      "content-header": contentHeader,
      detailInfo
    },
    data() {
      return {
        list: [],
        artical: {
          title: "详情页标题",
          content: "<p>暂无内容</p>"
        },
        loading: true,
        browNum: 0
      };
    },
    computed: {
      routeItem() {
        let routes = this.$store.getters.siteMap;
        let result;
        routes.forEach(route => {
          if (route.children) {
            route.children.forEach(child => {
              if (child.name == this.$route.name) {
                result = child;
              }
            });
          }
        });
        return result;
      },
      id() {
        return this.$route.params.id || false;
      },
      headerTitle() {
        if (this.routeItem.name.split("-")[1] === "detail")
          return this.routeItem.title;
        else {
          return artical.title;
        }
      }
    },
    methods: {
      refreshList() {
        getList(this.routeItem.id).then(res => {
          if (res.data.recordsList.length) {
            this.artical = res.data.recordsList[0];
            this.$route.query.id = res.data.recordsList[0].id;
            getBrowseNum(res.data.recordsList[0].id).then(res => {
              this.browNum = res.data;
            });
            addBrowseNum(res.data.recordsList[0].id, "3");
          } else {
            this.artical = {
              title: this.routeItem.title,
              content: "暂无内容"
            };
          }
          this.loading = false;
        });
      },
      refreshDetail() {
        getDetail(this.id).then(res => {
          this.artical = res.data;
        });
      },
      refreshArtical() {
        if (this.id) {
          this.refreshDetail();
          getBrowseNum(this.id).then(res => {
            this.browNum = res.data;
          });
          addBrowseNum(this.id, "3");
        } else {
          this.refreshList();
        }
      },
      getBrowseNum() {
        if (this.id) {
          getBrowseNum(this.id).then(res => {
            this.browNum = res.data;
          });
        } else {
          getBrowseNum(this.$route.query.id).then(res => {
            this.browNum = res.data;
          });
        }
      },
      addBrowseNum() {
        if (this.id) addBrowseNum(this.id, "3");
        else addBrowseNum(this.$route.query.id, "3");
      }
    },
    mounted() {
      this.refreshArtical();
    },
    watch: {
      routeItem: function () {
        this.refreshArtical();
      },
      id: function () {
        this.refreshArtical();
      }
    }
  };

</script>

<style lang="less" scoped>
  .content-wrap {
    margin-top: 20px;
    line-height: 1.8;
  }

</style>
